<template>
  <div class="contains">
    <a-breadcrumb
      style="font-size: 18px; font-weight: bold; margin-bottom: 20px"
    >
      <a-breadcrumb-item>个人中心</a-breadcrumb-item>
      <a-breadcrumb-item>我的交割</a-breadcrumb-item>
    </a-breadcrumb>

    <div style="margin: 0 auto; text-align: center">
      <div ref="chart1" style="width: 100%; height: 500px"></div>
      <a-divider />
      <div ref="chart2" style="width: 100%; height: 500px"></div>
    </div>
  </div>
</template>

<script>
// 引入echarts
import * as echarts from "echarts";
import { onMounted } from "vue";
import { reactive, ref } from "vue";
import moment from "moment";
import { useRouter } from "vue-router";
import { get, del, post, getBlob, tip, removeLocalToken, ddo } from "@/common";
import {
  UsergroupAddOutlined,
  PartitionOutlined,
  HistoryOutlined,
} from "@ant-design/icons-vue";

export default {
  components: {
    UsergroupAddOutlined,
    PartitionOutlined,
    HistoryOutlined,
  },
  setup() {
    // 存数据
    const state = reactive({
      //创建响应式数据对象和相关数据
      id: 1,
      chart1: ref(),
      data: ref(),
      val: ref(),
      chart2: ref(),
      u_id: ref(163339),
    });

    const init = () => {
      //定义方法
      //图标初始化
      var myChart1 = echarts.init(state.chart1);
      const option1 = {
        title: {
          text: "总用电量",
          left: "center",
        },
        series: [
          {
            type: "gauge",
            startAngle: 225,
            endAngle: -45,
            min: 0,
            max: 50,
            splitNumber: 10,
            axisLine: {
              lineStyle: {
                width: 30,
                color: [
                  [0.3, "#67e0e3"],
                  [0.7, "#37a2da"],
                  [1, "#fd666d"],
                ],
              },
            },
            pointer: {
              itemStyle: {
                color: "auto",
              },
            },
            axisTick: {
              distance: -30,
              length: 8,
              lineStyle: {
                color: "#fff",
                width: 2,
              },
            },
            splitLine: {
              distance: -30,
              length: 30,
              lineStyle: {
                color: "#fff",
                width: 4,
              },
            },
            axisLabel: {
              color: "auto",
              distance: 40,
              fontSize: 20,
            },
            detail: {
              valueAnimation: true,
              formatter: "{value} kwh",
              color: "auto",
            },
            data: [
              {
                value: state.val,
              },
            ],
          },
        ],
      };
      //指定配置项与数据显示
      myChart1.setOption(option1);
      var myChart2 = echarts.init(state.chart2);
      const option2 = {
        title: {
          text: "总发电量",
          left: "center",
        },
        series: [
          {
            type: "gauge",
            startAngle: 225,
            endAngle: -45,
            min: 0,
            max: 50,
            splitNumber: 10,
            axisLine: {
              lineStyle: {
                width: 30,
                color: [
                  [0.3, "#67e0e3"],
                  [0.7, "#37a2da"],
                  [1, "#fd666d"],
                ],
              },
            },
            pointer: {
              itemStyle: {
                color: "auto",
              },
            },
            axisTick: {
              distance: -30,
              length: 8,
              lineStyle: {
                color: "#fff",
                width: 2,
              },
            },
            splitLine: {
              distance: -30,
              length: 30,
              lineStyle: {
                color: "#fff",
                width: 4,
              },
            },
            axisLabel: {
              color: "auto",
              distance: 40,
              fontSize: 20,
            },
            detail: {
              valueAnimation: true,
              formatter: "{value} kwh",
              color: "auto",
            },
            data: [
              {
                value: 25,
              },
            ],
          },
        ],
      };
      //指定配置项与数据显示
      myChart2.setOption(option2);
    };

    const getReportData = () => {
      get("http://47.104.251.136:8045/crawler", { id: state.u_id }).then(
        (res) => {
          console.log(res);
          state.val = res.data.val;
          console.log(state.val);
          init();
        }
      );
    };
    // 生命周期函数
    onMounted(() => {
      getReportData();
    });
    return state;
  },
};
</script>

<style>
.contains {
  padding: 10px;
}
</style>